<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1>{{ msg }}</h1>
      <jack v-if="flag"></jack>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      // 父组件挂载的子组件
      // 1. 父组件先beforeCreate / created / beforeMount 再执行子组件beforeCreate / created /beforeMount/mounted ,
      // 最后执行父组件的mounted
      // 2. 如果子组件默认上来不加载  直接执行 父组件beforeCreate / created /beforeMount/mounted,某一节点子组件要渲染
      // 先执行父组件的breforeUpdate 再执行子组件的beforeCreate / created /beforeMount/mounted,最后父组件updated
      // 注册全局组件
      Vue.component("jack", {
        template: `
              <div>我是jack组件</div>
            `,
        beforeCreate() {
          console.log("jack beforeCreate");
        },
        created() {
          // 这里面一般发送请求
          console.log("jack created");
        },
        beforeMount() {
          console.log("jack beforeMount");
        },
        mounted() {
          console.log("jack mounted");
        },
        beforeUpdate() {
          console.log("jack beforeUpdate");
        },
        updated() {
          console.log("jack updated");
        },
        beforeDestroy() {
          console.log("jack beforeDestroy");
        },
        destroyed() {
          console.log("jack destroyed");
        },
      });

      // 八大生命周期函数: 这些生命周期函数, 会在vue的生命周期的不同阶段, 会自动被vue调用
      const vm = new Vue({
        el: "#app",
        data: {
          msg: "hello vue",
          list: [],
          flag: false,
        },
        beforeCreate() {
          console.log("vm - beforeCreate");
        },
        created() {
          console.log("vm - created");
        },
        beforeMount() {
          console.log("vm - beforeMount");
        },
        mounted() {
          console.log("vm - mounted");
        },
        beforeUpdate() {
          console.log("vm - beforeUpdate");
        },
        updated() {
          console.log("vm - updated");
        },
        beforeDestroy() {
          console.log("vm - beforeDestroy");
        },
        destroyed() {
          console.log("vm - destroyed");
        },
      });
    </script>
  </body>
</html>
